<template>
    <div class="jxjjshenqin-list">
        <div class="header-actions">
            <router-link style="text-decoration: none;"
                to="/main/renshi/jixiao/jxjjshenqin"><el-button>返回</el-button></router-link>
            <el-button style="margin-left:10px;" type="/main/renshi/jixiao/primary" @click="handleAdd">新增申请</el-button>
        </div>
        <div>
            <h2>绩效奖金申请单列表</h2>
        </div>
        <div class="search-bar">
            <el-input v-model="searchForm.applicant" placeholder="申请人" style="width: 200px; margin-right: 10px;" />
            <el-input v-model="searchForm.department" placeholder="部门" style="width: 200px; margin-right: 10px;" />
            <el-input v-model="searchForm.position" placeholder="职位" style="width: 200px; margin-right: 10px;" />
            <el-date-picker v-model="searchForm.applyDateRange" type="daterange" range-separator="至"
                start-placeholder="申请开始日期" end-placeholder="申请结束日期" style="width: 350px; margin-right: 10px;"
                value-format="yyyy-MM-dd" />
            <div>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="applicant" label="申请人" width="100" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="position" label="职位" width="120" />
            <el-table-column prop="recommendedBonus" label="推荐奖金" width="120" />
            <el-table-column prop="applyDate" label="申请日期" width="120">
                <template v-slot="scope">
                    {{ formatDate(scope.row.applyDate) }}
                </template>
            </el-table-column>
            <el-table-column prop="managerSignature" label="经理签名" width="100" />
            <el-table-column prop="hrSignatureDate" label="人资签字日期" width="120">
                <template v-slot="scope">
                    {{ formatDate(scope.row.hrSignatureDate) }}
                </template>
            </el-table-column>
            <el-table-column prop="executiveSignatureDate" label="高层签字日期" width="120">
                <template v-slot="scope">
                    {{ formatDate(scope.row.executiveSignatureDate) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="calc(100% - 220px)">
                <template v-slot="scope">
                    <el-button size="small" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="currentPage"
                :page-size="pageSize" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { getPerformanceBonusList, deletePerformanceBonus } from '@/api/performanceBonus'

export default {
    data() {
        return {
            searchForm: {
                applicant: '',
                department: '',
                position: '',
                applyDateRange: []
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        formatDate(date) {
            if (!date) return ''
            return new Date(date).toLocaleDateString()
        },
        async fetchData() {
            try {
                const params = {
                    current: this.currentPage,
                    size: this.pageSize,
                    applicant: this.searchForm.applicant,
                    department: this.searchForm.department,
                    position: this.searchForm.position
                }

                if (this.searchForm.applyDateRange && this.searchForm.applyDateRange.length === 2) {
                    params.startDate = this.searchForm.applyDateRange[0]
                    params.endDate = this.searchForm.applyDateRange[1]
                }

                const response = await getPerformanceBonusList(params)
                this.tableData = response.data.records
                this.total = response.data.total
            } catch (error) {
                this.$message.error('获取列表失败：' + error.message)
            }
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },
        handleAdd() {
            this.$router.push('/main/renshi/jixiao/jxjjshenqin')
        },
        handleView(row) {
            this.$router.push(`/main/renshi/jixiao/jxjjshenqin?id=${row.id}&mode=view`)
        },
        handleEdit(row) {
            this.$router.push(`/main/renshi/jixiao/jxjjshenqin?id=${row.id}`)
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                await deletePerformanceBonus(row.id)
                this.$message.success('删除成功')
                this.fetchData()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败：' + error.message)
                }
            }
        },
        handleSearch() {
            this.currentPage = 1
            this.fetchData()
        },
        resetSearch() {
            this.searchForm = {
                applicant: '',
                department: '',
                position: '',
                applyDateRange: []
            }
            this.handleSearch()
        }
    }
}
</script>

<style scoped>
.jxjjshenqin-list {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 40px);
}

.header-actions {
    display: flex;
    /* padding: 0px 10px; */
    align-items: center;
    justify-content: space-between;
}

.search-bar {
    margin: 10px 0;
    display: flex;
    /* align-items: center; */
    /* flex-wrap: wrap; */
}

.search-bar .el-input,
.search-bar .el-select,
.search-bar .el-date-picker {
    margin-bottom: 10px;
}

.pagination-container {
    margin-top: 20px;
    text-align: center;
}
</style>